<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="220px" style="background-color: #fff; height:500px; padding: 10px">
                <el-input v-model="input2" class="w-50 m-2" placeholder="请输入搜索内容" />
                <el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick" :icon="icon" />
            </el-aside>
            <el-main>
                <div class="search">
                    <el-input v-model="val1" class="w-50 m-2" placeholder="请输入学生姓名" />
                    <el-input v-model="val2" class="w-50 m-2" placeholder="请输入学籍号或身份证" />
                    <el-input v-model="val3" class="w-50 m-2" placeholder="请输入账号" />
                    <el-button type="primary" style="height: 30px;" @click="finds(val1, val2, val3)">查询</el-button>
                </div>
                <div class="vote_couent">
                    <el-table :data="tableData" style="width: 100% ">
                        <el-table-column prop="index" label="序号" width="60">
                            <template #default="scope">
                                {{ scope.$index + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="classes" label="所属学校" width="120">
                            <template #default="scope">
                                {{ scope.row.classes.school.name }}
                            </template>

                        </el-table-column>
                        <el-table-column prop="classes" label="年级班级" width="140">
                            <template #default="scope">
                                {{ `${scope.row.classes.gradeId == 3 ? "三" : "3"}年级${scope.row.classes.classId == 1 ? "一" :
                                    "二"}班` }}
                            </template>

                        </el-table-column>
                        <el-table-column prop="sex" label="性别">
                            <template #default="scope">
                                {{ scope.row.sex == 1 ? "男" : "女" }}
                            </template>

                        </el-table-column>
                        <el-table-column prop="name" label="学生姓名"></el-table-column>
                        <el-table-column prop="sex" label="性别">
                            <template #default="scope">
                                {{ scope.row.sex == 1 ? "男" : "女" }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="id" label="学籍号"></el-table-column>
                        <el-table-column prop="documentType" label="证件类型"></el-table-column>
                        <el-table-column prop="documentNum" label="证件号码"></el-table-column>
                        <el-table-column prop="phone" label="账号"></el-table-column>
                    </el-table>
                </div>
                <div class="fy">
                    <el-pagination layout="prev, pager, next" background :total="page * 10"
                        @current-change="handleCurrentChange" />
                    <span>{{ `共&nbsp;&nbsp;${page}&nbsp;&nbsp;页` }}</span>
                    <span>跳至</span>
                    <el-input v-model="input" />
                    <span>页</span>
                    <el-button @click="jump">确定</el-button>
                    <el-select v-model="select" placeholder="6页/条 " style="width: 115px">
                        <el-option label="4页/条" value="4" @click="fn" />
                        <el-option label="5页/条" value="5" @click="fn" />
                        <el-option label="6页/条" value="6" @click="fn" />
                    </el-select>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import server from '@/api';
import { ref, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
var val1 = ref("")
var val3 = ref("")
var val2 = ref("")
var icon = ref(false)
const input2 = ref()
interface Tree {
    label: string
    children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
    // console.log(data)
}

const data: Tree[] = [
    {
        label: '教育局',
        children: [
            {
                label: '小学',
                children: [
                    {
                        label: '实验小学',
                        children: [
                            { label: "一年级" },
                            { label: "二年级" },
                            { label: "三年级" },
                        ]
                    },
                ],
            },
        ],
    },
]
const defaultProps: any = {
    children: 'children',
    label: 'label',
}
var page: any = ref()
const cp = ref('1')
const ps = ref('6')
const input: any = ref('')
const select: any = ref('')
const value = ref('')
var tableData: any = ref([])
const currentPage4 = ref(4)
const pageSize4 = ref(20)
const small: any = ref(false)
const background: any = ref(false)
const disabled = ref(false)
onMounted(async () => {
    var res = await server.home.student_getStudentByPage({ cp: cp.value, ps: ps.value })
    // console.log(res.data.data.date);
    tableData.value = res.data.data.date
    page.value = res.data.data.page.pages

})
//点击切换页数
const handleCurrentChange = async (val: any) => {
    cp.value = val
    // reduce()
    var res = await server.home.student_getStudentByPage({ cp: cp.value, ps: ps.value })
    // console.log(res.data.data.date);
    tableData.value = res.data.data.date
    page.value = res.data.data.page.pages
}
//一页多少条数据
async function fn() {
    ps.value = select.value
    var res = await server.home.student_getStudentByPage({ cp: cp.value, ps: ps.value })
    // console.log(res.data.data.date);
    tableData.value = res.data.data.date
    page.value = res.data.data.page.pages
    // reduce()
}

//跳转页数
async function jump() {
    if (input.value > page.value) {
        ElNotification.success({ message: '请输入正确页数' });
        input.value = ''
        return
    }
    cp.value = input.value
    // reduce()
    var res = await server.home.student_getStudentByPage({ cp: cp.value, ps: ps.value })
    // console.log(res.data.data.date);
    tableData.value = res.data.data.date
    input.value = ''
}

const finds = async (val1: any, val2: any, val3: any) => {
    if (val1 && !val2 && !val3) {
        var res = await server.home.student_getStudentByPage()
        tableData.value = res.data.data.date
        tableData.value = tableData.value.filter((item: any) => item.name.includes(val1))

    } else if (val2 && !val1 && !val3) {
        var res = await server.home.student_getStudentByPage()
        tableData.value = res.data.data.date
        tableData.value = (tableData.value.filter((item: any) => item.id == val2)) || (tableData.value.filter((item: any) => item.documentNum == val2))
    } else {
        var res = await server.home.student_getStudentByPage()
        tableData.value = res.data.data.date
        tableData.value = (tableData.value.filter((item: any) => item.phone == val3))
    }


}
</script>


<style scoped lang="scss">
.el-main {
    margin-left: 20px;
    background-color: #fff;

    .search {
        display: flex;

        .el-input {
            width: 180px;
            margin-right: 20px;
        }
    }

    .vote_couent {
        .el-table .warning-row {
            --el-table-tr-bg-color: var(--el-color-warning-light-9);
        }

        .el-table .success-row {
            --el-table-tr-bg-color: var(--el-color-success-light-9);
        }
    }

    .fy {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 10px;
        position: absolute;
        bottom: 50px;
        right: 50px;
    }

    .fy .el-input {
        width: 5%;
    }

    .fy span,
    .fy .el-select {
        margin: 0px 10px;
    }
}
</style>
